// 公共样式
$base-url = ""
bg-image($url)
  background: url($base-url + $url) no-repeat center
  background-size: 100%
img
  max-width 100%
clearfix:before,.clearfix:after
  display: table
  content: ""
.clearfix:after
  clear both
  zoom 1

/* 移动端幕（手机，小于 768px） */
.wrapper-main-content
  .header
    height 8.44rem /* 211/25 */
    bg-image("/images/header_1.jpg")
  // product
  .product
    bg-image("/images/product_bg1.jpg")
    background-position: center top
    padding-top: .6rem /* 15/25 */
    .h1-title
      font-size: 0
      height 1.6rem /* 40/25 */
      bg-image("/images/h1_title.png")
      background-size: 50%
    .sub-title
      font-size: 0
      height .48rem /* 12/25 */
      margin-top: .2rem /* 5/25 */
      margin-bottom: .48rem /* 12/25 */
      bg-image("/images/h4_title.png")
      background-size: 50%
    .product-row
      padding: 0 .28rem /* 7/25 */
      .product-row-item
        width 50%
        padding: 0 .16rem /* 4/25 */
        padding-bottom: .28rem /* 7/25 */
        float left
    .time
      margin-right: .8rem /* 20/25 */
      height .32rem /* 8/25 */
      bg-image("/images/time_1.png")
      background-position: right 0
      background-size: 4.52rem /* 113/25 */ .32rem /* 8/25 */
  // reservation
  .reservation
    height 14.2rem /* 355/25 */
    padding-top: 3.2rem /* 80/25 */
    bg-image("/images/reservation_bg1.jpg")
    .grounp-item
      display: flex
      align-items: center
      margin-bottom: .68rem /* 17/25 */
      .title
        width 2.8rem /* 70/25 */
        margin-left: .8rem /* 20/25 */
        text-align: center
        font-size: .48rem /* 12/25 */
        color: #3c4a61
      .input
        width 10.2rem /* 255/25 */
        height .96rem /* 24/25 */
        padding: .2rem /* 5/25 */ .32rem /* 8/25 */
        border: 1px solid #3f4b64
        outline: none
        background: transparent
        border-radius: 0
        box-shadow: none
        appearance none
        font-size: .32rem /* 8/25 */
      select
        width 10.2rem /* 255/25 */
        height .96rem /* 24/25 */
        padding: .2rem /* 5/25 */ .32rem /* 8/25 */
        border: 1px solid #3f4b64
        outline: none
        border-radius: 0
        box-shadow: none
        appearance none
        font-size: .32rem /* 8/25 */
        bg-image("/images/down.png")
        background-size: .28rem /* 7/25 */ .2rem /* 5/25 */
        background-position: 9.52rem /* 238/25 */ center
    .min-grounp-item
      display: flex
      align-items: center
      &:last-child .title
        margin-left: 0
      select
        width 3.72rem /* 93/25 */
        height .96rem /* 24/25 */
        padding-left: .4rem /* 10/25 */
        appearance none
        border: 1px solid #3f4b64
        outline: none
        border-radius: 0
        box-shadow: none
        font-size: .32rem /* 8/25 */
        bg-image("/images/down.png")
        background-size: .28rem /* 7/25 */ .2rem /* 5/25 */
        background-position: 3rem /* 75/25 */ center
    .protocol
      display: flex
      flex-direction: column
      align-items: center
      font-size: .32rem /* 8/25 */
      color: #404040
      text-align: center
      label
        display: flex
        align-items: center
        .check
          width .48rem /* 12/25 */
          margin-right: .16rem /* 4/25 */
          height @width
          border: 1px solid #000
        input
          opacity 0
          width 0
          height 0
// /* 小屏幕（平板，大于等于 768px） */
// @media (min-width:768px)
//   .wrapper-main-content
//     .header
//       background-image: none

// /* 中等屏幕（桌面显示器，大于等于 992px） */
// @media (min-width:992px)
//   .header
//     background: #000

// /* 大屏幕（大桌面显示器，大于等于 1200px） */
// @media (min-width:1200px)
//   .header
//     background: #666